<template>
  <div class="keyboard-number">
    <!--报到成功--分类信息1--允许&完成-->
    <!--    {{optionsInfo['print']}}-->
    <template v-if="state===1">
      <ReportFinish :devType="devType" :field="field" @handleSignPrint="handleSignPrint"/>
      <ReportAllow :devType="devType" :field="field" @handleReport="handleReport" @handleReportAll="handleReportAll"/>
    </template>
    <!--报到成功--分类信息2--等待-->
    <template v-if="state===2">
      <ReportSuccessIcon/>
      <ReportFinish :devType="devType"/>
    </template>
    <!--报到成功--分类信息3--未建档-->
    <template v-if="state===3">
      <ReportSuccessIcon2/>
      <ReportFinish :devType="devType"/>
    </template>
    <!--报到成功--分类信息4--余额不足-->
    <template v-if="state===4">
      <ReportWarnIcon/>
      <ReportFinish :devType="devType"/>
    </template>

    <!--报到失败--分类信息1--信息未查询-->
    <template v-if="state===5">
      <ReportFailIcon/>
    </template>
    <!--报到失败--分类信息2--设备离线-->
    <template v-if="state===6">
      <ReportFailIcon/>
    </template>
    <!-- 手工 报到成功--分类信息7--允许&完成 -->
    <template v-if="state===7">
      <ReportAllow 
          :devType="devType" 
          :field="field" 
          @handleReport="handleReport" 
          @handleReportAll="handleReportAll"
          adoptList="extendParams"
      />
    </template>
  </div>
</template>

<script>
import ReportAllow from './report-allow.vue';
import ReportFinish from './report-finish.vue';
import ReportWarnIcon from './report-warn-icon.vue';
import ReportFailIcon from './report-fail-icon.vue';
import ReportSuccessIcon from './report-success-icon.vue';
import ReportSuccessIcon2 from './report-success-icon2.vue';

export default {
  name: 'reportResult',

  components: {
    ReportAllow,
    ReportFinish,
    ReportWarnIcon,
    ReportFailIcon,
    ReportSuccessIcon,
    ReportSuccessIcon2,
  },

  props: {
    state: {
      type: Number
    },
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    }
  },

  data() {
    return {}
  },

  computed: {},

  methods: {
    handleReport(params) {
      this.$emit('handleReport', params);
    },


    handleReportAll(params) {
      this.$emit('handleReportAll', params);
    },

    handleSignPrint(params) {
      this.$emit('handleSignPrint', params);
    },

  }
};
</script>

<style lang="scss" scoped>
.keyboard-number {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100%);
  box-sizing: border-box;
  overflow: hidden;
}
</style>